<!--frontend\templates\phone_followup.html-->
{% extends "layouts/base.html" %} {% block title %}电话随访记录管理{% endblock
%} {% block styles %}
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/bootstrap.min.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/core.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/phone_followup.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/components/student-info-bar.css') }}"
/>
{% endblock %} {% block content %}
<h5 class="mt-3">电话随访记录管理</h5>
<div class="row">
  <!-- 查询输入区域（配置驱动） -->
  <div id="fixedQueryArea"></div>

  <!-- 查询结果表 -->
  <div id="scrollable-content" class="col-12">
    <div class="card" id="search-results" style="display: none">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover w-100">
            <thead id="queryTableHead">
              <!-- 由通用QueryResultTable组件动态渲染 -->
            </thead>
            <tbody id="queryTableBody">
              <!-- 由通用QueryResultTable组件动态渲染 -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div id="pagination-bar" style="text-align: center; margin: 16px 0"></div>

  <!-- 学生基本信息条（统一组件） -->
  <div id="student-info-bar" class="student-info-bar-row">
    <!-- 由统一组件 renderStudentInfoBar() 动态渲染 -->
  </div>

  <!-- 电话随访录入/详情表单（完全配置驱动） -->
  <form id="followup-form" style="display: none">
    <div class="card mb-4">
      <div class="card-header">电话随访录入</div>
      <div class="card-body row g-3" id="followup-form-fields">
        <!-- 由JS根据全局唯一配置动态渲染随访表单字段 -->
      </div>
      <div class="card-footer mb-3 text-end">
        <button
          type="button"
          class="btn btn-outline-primary"
          id="btn-back-to-archive"
          style="display: none"
        >
          学生档案
        </button>
        <button type="submit" class="btn btn-primary">保存</button>
        <button type="button" class="btn btn-secondary" id="cancel-btn">
          取消
        </button>
        <button type="button" class="btn btn-outline-secondary" id="btn-back">
          返回
        </button>
        <button type="button" class="btn btn-info" id="btn-show-all">
          查询全部随访记录
        </button>
        <button type="button" class="btn btn-success" id="btn-export-xlsx">
          导出Excel
        </button>
        <button type="button" class="btn btn-warning" id="btn-export-csv">
          导出CSV
        </button>
        <button
          type="button"
          class="btn btn-warning ms-2"
          id="btn-edit-record"
          style="display: none"
        >
          编辑
        </button>
      </div>
    </div>
  </form>

  <!-- 历史表格区域（确保无内联样式） -->
  <div id="history-table-area" class="col-12" style="display: none">
    <div class="card">
      <div class="card-header">随访记录历史</div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-hover w-100" id="history-table">
            <thead>
              <tr id="history-table-header">
                <!-- 这里应该是空的，由JavaScript动态生成 -->
              </tr>
            </thead>
            <tbody>
              <!-- 由JS配置驱动加载 -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="mb-3 text-end">
      <button
        type="button"
        class="btn btn-outline-primary"
        id="btn-back-to-archive-history"
      >
        学生档案
      </button>
      <button type="button" class="btn btn-secondary" id="btn-view-all-logs">
        查看全部日志
      </button>
      <button
        type="button"
        class="btn btn-success"
        id="btn-export-xlsx-history"
      >
        导出Excel
      </button>
      <button type="button" class="btn btn-warning" id="btn-export-csv-history">
        导出CSV
      </button>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='js/FixedQueryArea.js') }}"></script>
<script src="{{ url_for('static', filename='js/QueryResultTable.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/student-info-bar.js') }}"></script>
<script src="{{ url_for('static', filename='js/phone_followup.js') }}"></script>
{% endblock %}
